<!-- 共享文档库 -->
<template>
  <div class="grid" ref="fileContainer">
    <!-- 通用头部 -->
    <div class="col-12">
      <CommonHeaderToolBar></CommonHeaderToolBar>
    </div>
    <!-- 筛选条件 -->
    <div class="col-12 grid">
      <span class="col-12 text-center">
        <InputText class="w-5"
                   placeholder="输入相关文件名自动筛选"
                   v-model="filename"/>
      </span>
    </div>
    <!-- 文章内容 -->
    <div class="grid col-12 p-5">
      <div v-for="(item, index) of documentations" class="grid col-2 justify-content-center align-items-center"
           :key="index">
        <NonRadiusCard class="col-12 hvr-curl-top-right m-5 h-20rem p-1 doc-image"
                       @mouseenter="imageHoverHandler($event, true)"
                       @mouseleave="imageHoverHandler($event, false)"
                       @click="readDoc(item.target)"
                       style="background-size: 100% 100%; height: 80%; width: 80%;"
                       :style="`background-image: url(${item.image.replace(' ', '%20')});`">
        </NonRadiusCard>
        <div class="col-12 text-center">
          <span class="doc-text">
            {{ item.filename }}
          </span>
        </div>
      </div>
    </div>

    <!-- 上传 -->
    <ToolButton class="upload-tool-btn"
                customer-siderbar-class="upload-siderbar"
                :top="100 "
                :affix-target-dom="fileContainer"
                :modal="true">
      <template #sidebarContent>
        <FileUploadPanel :url="`${CUSTOMER_FILE}/file/uploadPdf`"
                         :show-input="false"
                         path="docs"/>
      </template>
    </ToolButton>
  </div>
</template>
<script lang="ts" setup>
/** JS */
import {ref, Ref, reactive, onMounted, watch} from 'vue';
import {useRouter} from 'vue-router';
import {FileService, Paging, CUSTOMER_FILE} from '@/utils/ApiRequest';
import Cache from '@/utils/Cache';
import toast from '@/utils/Toast';
import {FileDataResponseEntity} from '@/interface/file/entity/FileEntittyInterface';
import {ProcessingData} from '@/utils/YzjUtils';
/** 组件 */
import NonRadiusCard from '@/components/card/NonRadiusCard.vue'
import CommonHeaderToolBar from '@/components/toolbar/CommonHeaderToolBar.vue';
import FileUploadPanel from '@/components/panel/FileUploadPanel.vue';
import ToolButton from '@/components/button/ToolButton.vue';

const fileService = new FileService(), router = useRouter(), cache = new Cache(),
    processingUtils = new ProcessingData();
const fileContainer = ref(null);
/** 数据处理 */
let page: Paging = reactive({
      page: 0,
      limit: 20
    }),
    documentations: Ref<FileDataResponseEntity[]> = ref([]);
// 浏览文档
const readDoc = (target: string) => {
  // 利用 storage 中是否存在 userMsg 作为判断
  if (cache.get('userMsg') && cache.get('token')) {
    let href = router.resolve({
      path: '/read',
      name: 'read'
    });
    cache.set('temp_doc', target, 60000);
    window.open(href.href, '_blank');
  } else {
    toast.warn("您未登录哦", "请先登录后重试(●'◡'●)", 3000);
  }

}
let arr: Ref<FileDataResponseEntity[]> = ref([]);
onMounted(() => {
  fileService.docs(page).then(res => {
    if (res) {
      documentations.value = res.data;
      arr.value = documentations.value.concat();
    }
  })
});
/** 动画处理 */
const hoverFlag = ref(false);
const imageHoverHandler = (e, flag) => {
  hoverFlag.value = flag;
  let target = e.target;
  let text = target.parentElement.children[1], classList = text.children[0].classList;
  if (!flag && classList.contains('doc-text-active')) {
    text.children[0].classList.remove('doc-text-active')
  } else {
    text.children[0].classList.add('doc-text-active')
  }
}

/** 筛选条件 */
const filename = ref('');
watch(filename, (n) => {
  documentations.value = processingUtils.filterArray(arr.value, n, 'filename', false);
})

</script>

<style lang="less" scoped>

.doc-image, .doc-text {
  font-size: 16px;

  &:hover {
    color: red;
    cursor: pointer;
    text-decoration: underline;
  }

  transition: all .15s;
}

.doc-image {
  background-repeat: no-repeat;
  margin-bottom: 0 !important;
}

.doc-text-active {
  color: red;
}

.doc-date {
  font-size: 12px;
  color: var(--purple-600)
}
</style>
